<template>
  <div v-global-loading="modalloading">
    <a-form :model="form" ref="formRef" :labelCol="{span: 8}">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="会员名称" name="membersId">
            <a-select
              v-model:value="form.membersId"
              :filter-option="filterOption"
              show-search
              allowClear
              disabled
            >
              <a-select-option
                :value="item.id"
                :title="item.name"
                v-for="item in membershipList"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="运输区域"
            name="transportArea"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-input v-model:value="form.transportArea" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <!-- <a-form-item label="公司代码" name="companyCode">
            <a-input v-model:value="form.companyCode" allowClear />
          </a-form-item> -->
          <!-- <a-form-item label="商课语言" name="language">
            <a-input v-model:value="form.language" allowClear />
          </a-form-item> -->
          <a-form-item
            label="企业名称"
            name="customerName"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-input v-model:value="form.customerName" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="部门" name="legalPerson">
            <a-input v-model:value="form.legalPerson" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系人名称" name="contactName">
            <a-input v-model:value="form.contactName" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="电话"
            name="tel"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-input v-model:value="form.tel" allowClear /> </a-form-item
        ></a-col>
        <a-col :span="12">
          <a-form-item label="客户简称" name="shortName">
            <a-input v-model:value="form.shortName" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号码" name="phone">
            <a-input v-model:value="form.phone" allowClear /> </a-form-item
        ></a-col>
        <a-col :span="12">
          <a-form-item label="客户编码" name="customerCode">
            <a-input v-model:value="form.customerCode" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="邮箱"
            name="email"
            :rules="[
              {required: true, message: '请填写正确格式的邮箱', type: 'email'}
            ]"
          >
            <a-input v-model:value="form.email" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <!-- <a-form-item label="商客分组" name="customerGroup">
            <a-input v-model:value="form.customerGroup" allowClear />
          </a-form-item> -->
          <a-form-item
            label="统一社会信用代码"
            name="creditCode"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-input v-model:value="form.creditCode" allowClear />
          </a-form-item>
          <!-- <a-form-item label="法人身份证号码" name="identity">
            <a-input v-model:value="form.identity" allowClear />
          </a-form-item> -->
        </a-col>
        <a-col :span="12">
          <a-form-item label="传真" name="fax">
            <a-input v-model:value="form.fax" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="发票种类"
            name="invoiceType"
            :rules="[{required: true, message: '请填写'}]"
          >
            <!-- <a-input v-model:value="form.invoiceType" allowClear /> -->
            <a-select
              v-model:value="form.invoiceType"
              allowClear
              placeholder="请选择发票种类"
            >
              <a-select-option value="Z1"> 增值税专用发票 </a-select-option>
              <a-select-option value="Z3"> 增值税电子普通发票 </a-select-option>
              <a-select-option value="Z5"> 数电增值税专票 </a-select-option>
              <a-select-option value="Z6"> 数电增值税普票 </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12" v-show="isUpdata">
          <a-form-item label="贸易伙伴" name="vbund">
            <a-input v-model:value="form.vbund" allowClear /> </a-form-item
        ></a-col> -->
        <a-col :span="12">
          <a-form-item label="银行序号" name="bankNum">
            <a-input v-model:value="form.bankNum" allowClear />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12" v-show="isUpdata">
          <a-form-item label="是否为专卖角客户" name="isMonopoly">
            <a-select v-model:value="form.isMonopoly" allowClear>
              <a-select-option :value="true"> 是</a-select-option>
              <a-select-option :value="false"> 否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <!-- <a-form-item label="开票行国家" name="bankCountry">
            <a-input v-model:value="form.bankCountry" allowClear />
          </a-form-item> -->
          <a-form-item
            label="开票行银行代码"
            name="bankCode"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-input v-model:value="form.bankCode" allowClear />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12" v-show="isUpdata">
          <a-form-item label="客户贴牌" name="stickingCard">
            <a-input v-model:value="form.stickingCard" allowClear />
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item
            label="开票行账户名称"
            name="accountName"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-input v-model:value="form.accountName" allowClear />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12" v-show="isUpdata">
          <a-form-item label="世界板块" name="plate">
            <a-input v-model:value="form.plate" allowClear />
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item
            label="开票行账号"
            name="bankAccount"
            :rules="[{required: true, message: '请填写'}]"
          >
            <a-input v-model:value="form.bankAccount" allowClear />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12"> -->
        <!-- <a-form-item label="标识类型" name="type">
            <a-input v-model:value="form.type" allowClear />
          </a-form-item> -->
        <!-- <a-form-item label="客商注册地区" name="province">
                        <a-input v-model:value="form.province" allowClear />
                    </a-form-item> -->
        <!-- <a-form-item label="客商注册国家" name="country">
            <a-input v-model:value="form.country" allowClear />
          </a-form-item> -->

        <!-- <a-form-item label="是否集团" name="isbloc">
            <a-select v-model:value="form.isbloc" allowClear>
              <a-select-option :value="true"> 是</a-select-option>
              <a-select-option :value="false"> 否</a-select-option>
            </a-select>
          </a-form-item> -->
        <!-- <a-form-item label="授信额度" name="creditLine">
            <a-input v-model:value="form.creditLine" allowClear />
          </a-form-item>
          <a-form-item label="信用敞口金额" name="creditAmount">
            <a-input v-model:value="form.creditAmount" allowClear />
          </a-form-item>
          <a-form-item label="同步时间" name="sysDate">
            <a-date-picker
              style="width: 100%"
              v-model:value="form.sysDate"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </a-form-item> -->
        <!-- <a-form-item label="是否最近登录" name="isRecentlyLogin">
            <a-select v-model:value="form.isRecentlyLogin" allowClear>
              <a-select-option :value="true"> 是</a-select-option>
              <a-select-option :value="false"> 否</a-select-option>
            </a-select>
          </a-form-item> -->
        <!-- </a-col> -->
      </a-row>
      <a-form-item
        label="开票行银行名称"
        :labelCol="{span: 5}"
        name="bankName"
        :rules="[{required: true, message: '请填写'}]"
      >
        <a-input v-model:value="form.bankName" allowClear />
      </a-form-item>
      <a-form-item
        label="企业开票地址（省市区域）"
        :labelCol="{span: 5}"
        name="provinceId"
      >
        <a-form-item-rest>
          <a-select
            v-model:value="form.provinceId"
            :filter-option="filterOption"
            show-search
            allowClear
            style="width: 220px"
            placeholder="请选择省份"
            @change="
              (a) => {
                changeCity(a, 'province');
              }
            "
          >
            <a-select-option
              :value="item.code"
              v-for="(item, index) in district"
              :key="index"
              :title="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-select
            v-model:value="form.cityId"
            :filter-option="filterOption"
            show-search
            allowClear
            style="width: 200px; margin-left: 14px"
            placeholder="请选择城市"
            @change="
              (a) => {
                changeCity(a, 'city');
              }
            "
          >
            <a-select-option
              :value="item.code"
              v-for="(item, index) in provinceList"
              :key="index"
              :title="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-select
            v-model:value="form.countyId"
            :filter-option="filterOption"
            show-search
            allowClear
            style="width: 220px; margin-left: 14px"
            placeholder="请选择区县"
            @change="
              (a) => {
                changeCity(a, 'district');
              }
            "
          >
            <a-select-option
              :value="item.code"
              v-for="(item, index) in cityList"
              :key="index"
              :title="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item-rest>
      </a-form-item>

      <a-form-item
        label="企业开票详细地址"
        name="address"
        :labelCol="{span: 4}"
        :rules="[{required: true, message: '请填写'}]"
      >
        <a-input v-model:value="form.address" allowClear />
      </a-form-item>
      <a-form-item
        label="营业执照"
        name="businessLicense"
        :labelCol="{span: 4}"
        v-show="!isUpdata"
      >
        <div class="attachment-list" v-show="attachmentArr.length !== 0">
          <div
            class="attachment-item"
            v-for="(item, index) in attachmentArr"
            :key="index"
          >
            <div class="left">
              <a
                :href="item.url"
                target="_blank"
                rel="noopener noreferrer"
                v-if="item.urlName.includes('.pdf')"
                >{{ item.urlName }}</a
              >
              <a-image :src="item.url" width="60px" v-else></a-image>
            </div>
          </div>
        </div>
      </a-form-item>

      <a-form-item
        label="审批流程"
        name="flowDesignId"
        :rules="[{required: true, message: '请填写'}]"
        :labelCol="{span: 4}"
      >
        <a-select v-model:value="form.flowDesignId" allowClear>
          <a-select-option
            :value="item.id"
            v-for="item in businessType"
            :title="item.name"
            :filter-option="filterOption"
            show-search
            allowClear
          >
            {{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </a-form>
    <div style="display: flex; justify-content: end" v-if="isUpdata">
      <a-button style="margin-right: 14px" @click="addFormData(1)"
        >取消</a-button
      >
      <a-button
        type="primary"
        style="margin-right: 14px"
        @click="addFormData(2)"
        v-if="
          form.applyStatus == 0 ||
          form.applyStatus == 2 ||
          form.applyStatus == 3 ||
          (form.applyStatus == 9 && form.isAudit)
        "
        >保存</a-button
      >
      <a-button type="primary" @click="addFormData(3)">提交</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed} from "vue";
import useAppStore from "@/store/app";
import district from "@/utils/city";
import {userFlowDesignLis} from "@/api/common";
const filterOption = (input: string, option: any) => {
  return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const formRef = ref();
const businessType: any = ref([]);
const membershipList: any = ref([]);
async function getMembershipList() {
  membershipList.value = await useAppStore.getMembershipList();
}
getMembershipList();
const modalloading = ref(false);
const props = defineProps({
  data: {
    type: Object,
    default: {} //数据
  },
  isUpdata: {
    type: Boolean,
    default: false //是否是编辑
  },
  isHistory: {
    type: Boolean, //是否是历史信息
    default: false
  }
});
const addFormData = (type) => {
  if (type == 1) {
    formRef.value.clearValidate();
    emits("ok", false);
  } else if (type == 2) {
    formRef.value.validate().then(() => {
      emits("ok", true, true);
    });
  } else if (type == 3) {
    formRef.value.validate().then(() => {
      emits("ok", true, false);
    });
  }
};
const emits = defineEmits(["update:data", "ok"]);
const attachmentArr = ref<object[]>([]);
const form = computed({
  get() {
    // 营业执照
    if (props.data.businessLicense) {
      let businessLicenseUrlArr = props.data.businessLicense
        .split(",")
        .map((item) => {
          return {
            url: item,
            urlName: item.split("file/")[1]
          };
        });
      attachmentArr.value = businessLicenseUrlArr;
    }

    modalloading.value = true;
    for (let i = 0; i < district.length; i++) {
      if (district[i].code == props.data.provinceId) {
        provinceList.value = district[i].children;
        break;
      }
    }
    for (let i = 0; i < provinceList.value.length; i++) {
      if (provinceList.value[i].code == props.data.cityId) {
        cityList.value = provinceList.value[i].children;
        break;
      }
    }
    userFlowDesignLis({businessType: 200}).then((res) => {
      businessType.value = res.data;
    });
    setTimeout(() => {
      modalloading.value = false;
    }, 200);
    return props.data;
  },
  set() {
    emits("update:data");
  }
});
const isUpdata = computed({
  get() {
    return props.isUpdata;
  },
  set() {}
});
//省市区三级联动
const provinceList: any = ref([]); //市
const cityList: any = ref([]); //区
const changeCity = (a, b) => {
  if (b == "province") {
    form.value.cityId = null;
    form.value.city = null;
    form.value.countyId = null;
    form.value.county = null;
    provinceList.value = [];
    cityList.value = [];
    if (a) {
      district.forEach((item) => {
        if (item.code == a) {
          provinceList.value = item.children;
          form.value.provinceId = item.code;
          form.value.province = item.name;
        }
      });
    } else {
      form.value.provinceId = null;
      form.value.province = null;
    }
  } else if (b == "city") {
    cityList.value = [];
    form.value.countyId = null;
    form.value.county = null;
    if (a) {
      provinceList.value.forEach((item) => {
        if (item.code == a) {
          cityList.value = item.children;
          form.value.cityId = item.code;
          form.value.city = item.name;
        }
      });
    } else {
      form.value.cityId = null;
      form.value.city = null;
    }
  } else if (b == "district") {
    if (a) {
      cityList.value.forEach((item) => {
        if (item.code == a) {
          form.value.countyId = item.code;
          form.value.county = item.name;
        }
      });
    } else {
      form.value.countyId = null;
      form.value.county = null;
    }
  }
};
defineExpose({
  modalloading
});
</script>
<style lang="less" scoped></style>
